<template>
    <h3 style="text-align: :center;">理财项目列表</h3>

    理财编号:<input type="text" v-model="page.Fid" />
    理财名称:<input type="text" v-model="page.Fname" />
    理财收益:<input type="text" v-model="page.MinMoney" />-<input type="text" v-model="page.MaxMoney" />
    <input type="button" value="查询" @click="LoadData" />

    <table class="table table-bordered">
        <thead>
            <tr style="background-color: aqua;">
                <td>理财编号</td>
                <td>理财名称</td>
                <td>年收益</td>
                <td>月收益</td>
                <td>最低金额</td>
                <td>理财人数</td>
                <td>风险等级</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in data">
                <td>{{ item.F_Id }}</td>
                <td>{{ item.F_Name }}</td>
                <td>{{ item.F_APY }}</td>
                <td>{{ (item.F_APY / 12).toFixed(2) }}%</td>
                <td>{{ item.F_MinMoney.toFixed(2) }}CNY</td>
                <td>{{ item.F_Number }}</td>
                <td>{{ item.F_LevelChange }}</td>
                <td><a href="#" @click="TakeShow(item.F_Id)">购买</a></td>
            </tr>
        </tbody>
    </table>

    <span>数据共{{ page.totalCount }}条,每页{{ page.pageSize }}条,当前第{{ page.pageIndex }}/{{ page.pageCount }}
        <a href="#" @click="PageShow('F')">首页</a>
        <a href="#" @click="PageShow('U')">上一页</a>
        <a href="#" @click="PageShow('N')">下一页</a>
        <a href="#" @click="PageShow('E')">尾页</a>
    </span>
</template>


<script setup lang="ts">
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import { onMounted, ref } from 'vue'
import axios from 'axios'
import { useRouter,useRoute } from 'vue-router'


const data = ref([
    {
        F_Id: 0,
        F_Name: '',
        F_APY: 0,
        F_MinMoney: 0,
        F_Number: 0,
        F_Level: '',
        F_LevelChange: ''
    }
])


//声明分页参数的
const page = ref(
    {
        Fid: '',
        Fname: '',
        MinMoney: '',
        MaxMoney: '',
        pageIndex: 1,
        pageSize: 2,
        totalCount: 0,
        pageCount: 0
    }
)


//生命周期钩子
onMounted(() => {
    LoadData();
})


//查询方法
const LoadData = () => {
    axios.get('https://localhost:44305//api/Finans/ShowFinancing',
        {
            params: {
                Fid: page.value.Fid,
                Fname: page.value.Fname,
                MinFMoney: page.value.MinMoney,
                MaxFMoney: page.value.MaxMoney,
                pageIndex: page.value.pageIndex,
                pageSize: page.value.pageSize
            }
        })
        .then(res => {
            data.value = res.data.Flist;
            //将数据总数，总页数赋值
            page.value.totalCount = res.data.totalcount;
            page.value.pageCount = res.data.pageCount;
        })
        .catch(error => {
            console.log(error);
        }
        )

}

//分页方法
const PageShow = (msg: string) => {
    switch (msg) {
        case 'F':
            page.value.pageIndex = 1;
            LoadData();
            break;
        case 'U':
            if (page.value.pageIndex == 1) {
                return;
            }
            page.value.pageIndex--;
            LoadData();
            break;
        case "N":
            if ((page.value.pageIndex + 1) > page.value.pageCount) {
                page.value.pageIndex = page.value.pageCount;
                LoadData();
                return;
            }
            page.value.pageIndex = page.value.pageIndex + 1;
            LoadData();
            break;
        case "E":
            page.value.pageIndex = page.value.pageCount;
            LoadData();
            break;
    }
}

//创建路由实例
const Router = useRouter();
const route = useRoute();
//接受用户编号
const ULid = route.params.ULid;

const TakeShow = (F_Id: number) => {
    Router.push({
        name: "UserBuyFinanPage",
        params: {
            Fid: F_Id,
            ULid: ULid
        }
    })

}

</script>